﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="CascadingLists">
    <h2><DemoNavLink Link="ComboBox#CascadingLists" />ComboBox - Cascading Lists</h2>
    <p>
        This demo shows how to populate the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2">ComboBox</a> with items based on the user selection in another ComboBox.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Select a country and city" />
    </div>
    <div class="card-body">
        <div class="d-inline-block">
            <DxComboBox Data="@Countries"
                        TextFieldName="@nameof(Country.CountryName)"
                        Value="@CurrentCountry"
                        ValueChanged="@((Country country) => SelectedCountryChanged(country))"
                        SizeMode="SizeMode"></DxComboBox>
        </div>
        <div class="d-inline-block">
            <DxComboBox Data="@CurrentCountryCities"
                        TextFieldName="@nameof(City.CityName)"
                        @bind-Value="@CurrentCity"
                        SizeMode="SizeMode"></DxComboBox>
        </div>
    </div>
</div>

<CodeSnippet_Editor_ComboBox_Cascading></CodeSnippet_Editor_ComboBox_Cascading>


@code {
    List<Country> Countries { get; set; } = CountryCity.Countries;
    List<City> CurrentCountryCities { get; set; } = new List<City>();
    Country CurrentCountry { get; set; } = CountryCity.Countries[1];
    City CurrentCity { get; set; } = CountryCity.Cities[4];

    protected override void OnInitialized() {
        base.OnInitialized();
        SelectedCountryChanged(CurrentCountry);
    }

    void SelectedCountryChanged(Country country) {
        CurrentCountry = country;
        CurrentCountryCities = CountryCity.Cities.FindAll(city => city.CountryId == CurrentCountry.Id);
        CurrentCity = CurrentCountryCities[0];
    }
}
